
<!--
    用户管理页面
    温世杰
 -->
 <template>
  <div>
    <el-card style="margin-bottom: 10px">
      <el-input
        v-model="sousuofrom.userName"
        style="width: 200px"
        placeholder="请输入昵称"
        suffix-icon="el-icon-message"
      ></el-input>
      <el-button
        class="custom-button ml-10"
        icon="el-icon-search"
        @click="load()"
        >搜索</el-button
      >
      <!-- <el-button
        class="custom-buttonT ml-10"
        icon="el-icon-refresh"
        @click="reset()"
        >重置</el-button
      > -->
    </el-card>
    <!-- 表格数据 -->
    <el-card>
      <el-table :data="tableData" border stripe height="600">
        <el-table-column prop="id" label="ID" width="50" />
        <el-table-column prop="userName" label="用户名" width="120" />
        <el-table-column prop="imageId" label="头像" width="120">
          <template slot-scope="scope">
            <el-avatar
              :src="$imageUrl + scope.row.imageId"
              :size="60"
              @error="true"
            ></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="userPhone" label="手机号" width="160" />
        <el-table-column prop="userBirthday" label="生日" width="160" />
        <el-table-column prop="userSex" label="性别" width="160">
          <template slot-scope="scope">
            {{ scope.row.userSex == 0 ? "男" : "女" }}
          </template>
        </el-table-column>
        <el-table-column prop="userType" label="职业状态" width="160">
          <template slot-scope="scope">
            {{ scope.row.userType == 0 ? "普通用户" : "医师" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
            <template slot-scope="scope">
              <el-button v-if="scope.row.prohibition==0"
              class="pass_button"
              @click="DelArticle(scope.row.id)"
              icon="el-icon-edit"
              >拉黑
            </el-button>
            <el-button v-if="scope.row.prohibition==1"
              class="pass_button"
              @click="openArticle(scope.row.id)"
              icon="el-icon-edit"
              >解封
            </el-button>
            </template>
          </el-table-column>
        <!-- <el-table-column
          prop="logOff"
          label="禁言状态"
          align="center"
          width="200"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.logOff"
              active-value="0"
              inactive-value="1"
              active-color="#2cd3b5"
              inactive-color="#000000"
              @change="logoff(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="操作" width="630">
          <template slot-scope="scope">
            <el-button type="warning" @click="details(scope.row)"
              >注销<i class="el-icon-edit"></i
            ></el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </el-card>
    <!-- <el-dialog :title="title" :visible.sync="physicianViews" width="40%" center>
      <el-form>
        <el-form-item label="注销原因" prop="cancellationReason">
          <el-input
            v-model="updateForm.cancellationReason"
            auto-complete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="physicianViews = false">取 消</el-button>
        <el-button type="primary" @click="update('updateForm')">确定</el-button>
      </span>
    </el-dialog> -->
    <!-- 分页 -->
    <el-pagination
      class="pageAll"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="text-align: center"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data () {
    return {
      physicianViews: false,
      currentPage4: 1, // 第几页
      title: '',
      // 表格数据
      tableData: [],
      // multipleSelection:[],
      pageNum: 1, // 一条一条的走 条数
      pageSize: 5, // 一页五条页数
      total: 0,
      avatarUrl: '',
      updateForm: {
        id: '',
        cancellationReason: '',
        userId: '',
        cancellationId: ''
      },
      // 模糊查搜索框数值
      sousuofrom: {
        userName: ''
      },
      rules: {
        nickname: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
          { min: 1, max: 6, message: '长度在 1 到 6个字符', trigger: 'blur' }
        ]
      }
    } // return
  },
  mounted () {
    this.load()
  },
  // 方法集合
  methods: {
    //拉黑用户
    DelArticle(id) {
      this.$confirm("是否拉黑此用户", "提示", {
        confirmButtonText: "拉黑",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .delete("/userRules/toProhibition?userId=" + id)

            .then((res) => {
              if (res.data) {
                this.myMessage("success", "拉黑成功");
                this.load();
              } else {
                this.myMessage("warning", "拉黑失败！");
              }
            })
        })
        .catch(() => {
          this.myMessage("info", "已取消拉黑");
        });
    },
//解封用户
    openArticle(id) {
      this.$confirm("是否解封此用户", "提示", {
        confirmButtonText: "解封",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .delete("/userRules/openProhibition?userId=" + id)
            .then((res) => {
              if (res.data) {
                this.myMessage("success", "解封成功");
                this.load();
              } else {
                this.myMessage("warning", "解封失败！");
              }
            })
        })
        .catch(() => {
          this.myMessage("info", "已取消解封");
        });
    },
    details (row) {
      this.title = '注销原因'
      this.updateForm = JSON.parse(JSON.stringify(row))
      this.physicianViews = true
    },
    load () {
      // 查询用户信息
      this.$axios
        .get('/userRules/userList', {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            userName: this.sousuofrom.userName
          }
        })
        .then((res) => {
          this.tableData = res.data.data.content
          this.total = res.data.data.totalSize
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // update (row) {
    //   // 注销用户
    //   this.$axios
    //     .get('/userRules/useradd', {
    //       params: {
    //         cancellationId: this.updateForm.id,
    //         cancellationReason: this.updateForm.cancellationReason
    //       }
    //     })
    //     .then((res) => {
    //       if (res.data.flag) {
    //         this.myMessage('success', '操作成功') // 添加或修改成功提示
    //         this.physicianViews = false // 关闭窗口
    //         this.load()
    //       } else {
    //         this.myMessage('warning', res.data.code)
    //       }
    //     })
    //     .catch((err) => {
    //       console.log(err)
    //       this.myMessage('warning', '对不起，保存失败，请您稍后再试！') // 添加或修改失败
    //     })
    // },
    myMessage (type, message) {
      this.$message({
        message: message,
        type: type
      })
    },
    // logoff (row) {
    //   // 禁言功能
    //   this.$axios
    //     .post('/userRules/updateSilencedState/', row)
    //     .then((res) => {
    //       if (res.data.code === 200) {
    //         // 重新渲染刷新表格
    //         this.load()
    //         console.log(row.logOff === '1')
    //         if (row.logOff === '1') {
    //           this.$message.success('禁言')
    //         } else {
    //           this.$message.success('解除禁言')
    //         }
    //       }
    //     })
    // },
    handleSizeChange (val) {
      // 改变每页条数
      this.pageSize = val
      this.load()
    },
    handleCurrentChange (val) {
      // 改变当前页
      this.pageNum = val
      this.load()
    }
  }
}
</script>

<style scoped>
html.body {
  height: 100%;
}
</style>
